import React, { useState } from "react";
import style from "./style.module.scss";
import { MyNavBar } from "../../../components";
import { Switch, Cell, Checkbox, Button, Notify } from "react-vant";
import icon from "../../../assets/images/icon/hdpi/common_nav_message_black_n.png";
import { useNavigate } from "react-router-dom";
import axios from "axios";
import { useAppSelector } from "../../../store/hooks";
import { postHttp } from "../../../api";

interface textRawDate {
  title: string;
  isCheck: boolean;
  id: number;
}
const Index: React.FC = () => {
  const navigate = useNavigate();
  const doctorId = useAppSelector((state) => state.user.doctor.doctorId);
  const sessionId = useAppSelector((state) => state.user.doctor.sessionId);
  const [textData, setTextData] = useState<textRawDate[]>([
    {
      title: "正在忙,稍后为您解答",
      isCheck: true,
      id: new Date().getTime() - 1,
    },
    {
      title: "请先详细描述下您的情况!",
      isCheck: false,
      id: new Date().getTime() - 2,
    },
    {
      title: "我每天下午5:00-7:00之间有空,将会在那个时间段回复您",
      isCheck: false,
      id: new Date().getTime() - 3,
    },
  ]);

  /***************switch***************/
  // 开关的状态
  const [switchValue, setSwitchValue] = useState(true);
  // 自定义回复 选中的状态
  const [autoCheck, setAutoCheck] = useState(false);

  const onSwitchChange = async (checked: any) => {
    if (checked === false) {
      checkedItem();
      setAutoCheck(false);
    } else {
      // 开关打开 默认选中第一条回复内容
      textData.map((item) => {
        return (textData[0].isCheck = true);
      });
      setTextData(textData);
    }
    // 改变开关的状态
    setSwitchValue(checked);
  };
  const [content, setContent] = useState("");
  // 点击回复复选框
  const handleChecked = (id: number) => {
    const rest = textData.every((item, index) => {
      return (item.isCheck = true);
    });
    if (rest) {
      // 有一项为真   打开开关
      setSwitchValue(rest);
      // 关闭自定义回复的状态
      setAutoCheck(!rest);
    }

    // 点击回复的复选框
    const updateTextData = textData.map((item, index) => {
      if (item.id === id) {
        // 点击的那一项选中
        return { ...item, isCheck: true };
      } else {
        // 其他取消选中
        return { ...item, isCheck: false };
      }
    });
    setTextData(updateTextData);
  };

  // 点击自定义选中框
  const handleAutoCheck = (autoCheck: boolean) => {
    setAutoCheck(autoCheck);
    if (autoCheck) {
      // 自定义选中的状态为真   打开开关
      setSwitchValue(autoCheck);
      // 其他非自定义的 取消选中状态
      checkedItem();
    } else {
      // 自定义选中的状态为真   关闭开关
      setSwitchValue(true);
      // 数据的第一项 默认选中
      textData.map((item) => {
        return (textData[0].isCheck = true);
      });
      setTextData(textData);
    }
  };

  //共有的状态  当开关为假的时候  取消所有的选中状态
  const checkedItem = () => {
    const updateTextData = textData.map((item) => {
      return { ...item, isCheck: false };
    });
    setTextData(updateTextData);
  };

  // 自定义开启的时候  所有的开关全部关闭

  const handleSubmit = () => {
    if (switchValue) {
      // 设置
      if (autoCheck) {
        // 自定义回复
        postHttp("/auto/reply", { content: content, doctorId, sessionId }).then(
          (resp) => {
            if (resp.status === "0000") {
              Notify.show({ type: "danger", message: resp.message });
            }
          }
        );
      } else {
        // 模板回复
        const item = textData.find((v) => v.isCheck);
        if (item) {
          postHttp("/auto/reply", {
            content: item.title,
            doctorId,
            sessionId,
          }).then((resp) => {
            if (resp.status === "0000") {
              Notify.show({ type: "danger", message: resp.message });
            }
          });
        }
      }
    } else {
      // 取消
      axios.delete("/auto/reply/" + doctorId).then((resp) => {
        if (resp.data.status === "0000") {
          Notify.show({ type: "danger", message: resp.data.message });
        }
      });
    }
  };

  return (
    <div>
      <MyNavBar
        title={""}
        onClickLeft={() => {
          navigate("/my");
        }}
        rightText={
          <img
            onClick={() => {
              navigate("/my/message");
            }}
            src={icon}
            alt=""
            style={{ width: "20px" }}
            className="icon"
          />
        }
      ></MyNavBar>
      <div>
        <Cell
          border={false}
          titleClass={style.autoAnswer}
          center
          title="设置自动回复"
          size={"large"}
          rightIcon={
            <Switch
              activeColor="#3087ea"
              inactiveColor="#dcdee0"
              size={20}
              checked={switchValue}
              onChange={onSwitchChange}
            />
          }
        />
      </div>
      {/* 回复的内容 */}
      <div className={style.autoAnswerContainer}>
        {textData &&
          textData.map((item: textRawDate, index: number) => {
            return (
              <Cell
                key={index}
                title={item.title}
                titleClass={style.autoAnswerCellTitle}
                border={false}
                rightIcon={
                  <Checkbox
                    checked={item.isCheck}
                    iconSize="14px"
                    onChange={() => {
                      handleChecked(item.id);
                    }}
                  />
                }
              />
            );
          })}
      </div>

      {/* 自定义 */}

      <div className={style.customizationBox}>
        <Cell
          border={false}
          titleClass={style.customizationCellContent}
          center
          title="自定义"
          rightIcon={
            <Checkbox
              iconSize="14px"
              checked={autoCheck}
              onChange={(autoCheck) => {
                handleAutoCheck(autoCheck);
              }}
            />
          }
        />

        <div className={style.customizationMyContent}>
          <textarea
            value={content}
            onChange={(e) => setContent(e.target.value)}
            className={style.customizationItem}
            placeholder="请输入自定义内容"
          ></textarea>
        </div>

        <Button type="primary" block onClick={() => handleSubmit()}>
          提交
        </Button>
      </div>
    </div>
  );
};

export default Index;
